<template>
    <view class="login-container">
        <view class="head-img" 
        :style="{
            backgroundImage: 'url(' + getUrl('resource/app/images/login_head.png') + ')',
        }">
            <view class="txt">
                您好，
                <br />
                欢迎使用 {{ systermName?systermName:'tmAdmin' }}
            </view>
        </view>
        <view class="login-view">
            <view class="login-box">
                <u-form
                    :model="formData"
                    ref="formRef"
                    borderBottom
                    labelWidth="80"
                    labelPosition="top"
                    :labelStyle="{
                        fontSize: '32rpx',
                        fontWeight: 'bold',
                        color: '#333333',
                        paddingBottom: '15rpx',
                    }"
                >
                    <view v-if="formData.login_type == LoginTypeEnum.MOBILE">
                        <u-form-item label="手机号" borderBottom>
                            <u-input
                                type="number"
                                name="mobile"
                                border="bottom"
                                placeholder="请输入手机号"
                                maxlength="11"
                                v-model="formData.mobile"
                            />
                        </u-form-item>
                        <u-form-item label="验证码" borderBottom>
                            <u-input
                                type="number"
                                name="code"
                                border="bottom"
                                maxlength="6"
                                placeholder="请输入验证码"
                                v-model="formData.code"
                            >
                                <template #suffix>
                                    <u-code
                                        ref="codeRef"
                                        @change="codeChange"
                                        seconds="60"
                                        changeText="X秒重新获取"
                                    ></u-code>
                                    <text
                                        @tap="getSmsCode"
                                        :text="codeTips"
                                        class="code-txt"
                                        >{{ codeTips }}</text
                                    >
                                </template>
                            </u-input>
                        </u-form-item>
                    </view>
                    <view v-else>
                        <u-form-item label="账号" borderBottom>
                            <u-input
                                type="text"
                                name="account"
                                border="bottom"
                                placeholder="请输入账号"
                                maxlength="20"
                                v-model="formData.account"
                            />
                        </u-form-item>
                        <u-form-item label="密码" borderBottom>
                            <u-input
                                name="password"
                                :password="isShowPassword"
                                border="bottom"
                                placeholder="请输入密码"
                                v-model="formData.password"
                            >
                                <template #suffix>
                                    <u-icon
                                        :name="
                                            isShowPassword ? 'eye' : 'eye-fill'
                                        "
                                        size="20"
                                        @click="
                                            isShowPassword = !isShowPassword
                                        "
                                    ></u-icon>
                                </template>
                            </u-input>
                        </u-form-item>
                    </view>
                </u-form>
                <view class="mb-[15rpx] flex items-center">
                    <u-checkbox-group v-model="isAgreementClick">
                        <u-checkbox name="check" shape="circle" />
                    </u-checkbox-group>
                    <view class="text-xs flex">
                        已阅读并同意
                        <view @click.stop>
                            <navigator
                                class="navigator-txt"
                                hover-class="none"
                                url="/pages/agreement/agreement?type=service"
                            >
                                《服务协议》
                            </navigator>
                        </view>
                        和
                        <view @click.stop>
                            <navigator
                                class="navigator-txt"
                                hover-class="none"
                                url="/pages/agreement/agreement?type=privacy"
                            >
                                《隐私协议》
                            </navigator>
                        </view>
                    </view>
                </view>
                <button :loading="lock" @tap="userLogin()">登 录</button>
                <view class="reg" @tap="userRegister()">注 册</view>
                <view
                    class="mt-[20rpx] flex justify-between"
                    v-if="formData.login_type == LoginTypeEnum.MOBILE"
                >
                    <view @click.stop>
                        <u-text
                            type="primary"
                            text="账号密码登录"
                            @click="formData.login_type = LoginTypeEnum.ACCOUNT"
                        ></u-text>
                    </view>
                </view>
                <view class="mt-[20rpx] flex justify-between" v-else>
                    <view @click.stop>
                        <u-text
                            type="primary"
                            text="手机验证码登录"
                            @click="formData.login_type = LoginTypeEnum.MOBILE"
                        ></u-text>
                    </view>
                    <view @click.stop>
                        <navigator
                            class="navigator-txt"
                            hover-class="none"
                            url="/pages/login/forget"
                        >
                            忘记密码
                        </navigator>
                    </view>
                </view>
                <view class="line"
                    ><text>—————— 第三方账号登录 ——————</text></view
                >
                <view class="bottom">
                    <view class="icon" @tap="wxLogin()">
                        <image
                            class="!w-[80rpx] !h-[80rpx]"
                            src="/static/wx.png"
                        ></image>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import { test } from "@/uni_modules/uview-plus";
import { getUrl } from "@/utils/common";
import { useLogin } from "@/hooks/useLogin";
import { isWeixin } from "@/utils/channel";
import { login, sendSmsCode } from "@/api/login";
import { messageSuccess, messageError } from "@/utils/message";
import { useRoute } from "@/hooks/useRoute";
import { LoginTypeEnum } from "@/enums/channelEnum";
import useUserStore from "@/stores/user";
import useConfigStore from "@/stores/config";
import { getChannel } from "@/utils/channel";
import { useApiLock } from "@/hooks/useApiLock";

const formData = reactive({
    login_type: LoginTypeEnum.MOBILE,
    mobile: "",
    code: "",
    account: "",
    password: "",
    channel: getChannel(),
});

const formRef = ref(null);
const codeRef = ref(null);
const codeTips = ref("");
const isAgreementClick = ref(false);
const isShowPassword = ref(true);

const systermName =  computed(() =>  {
    return useConfigStore().sysConfig.base?.app_name
});

const codeChange = (text) => {
    codeTips.value = text;
};

// 获取验证码
const getSmsCode = async () => {
    if (codeRef.value?.canGetCode) {
        if (!test.mobile(formData.mobile)) {
            messageError("手机号不符合要求");
            return "";
        }
        await sendSmsCode({ scene: "user_login", mobile: formData.mobile });
        messageSuccess("验证码已发送");
        codeRef.value?.start();
    }
};

const { lock, apiCall: apiLogin } = useApiLock(login);

const userLogin = async () => {
    if (!isAgreementClick.value[0])
        return messageError("请勾选已阅读并同意《服务协议》和《隐私协议》");

    if (formData.login_type == LoginTypeEnum.ACCOUNT) {
        if (!formData.account) return messageError("请输入账号");
        if (!formData.password) return messageError("请输入密码");
    }

    if (formData.login_type == LoginTypeEnum.MOBILE) {
        if (!formData.mobile) return messageError("请输入手机号");
        if (!test.mobile(formData.mobile))
            return messageError("手机号不符合要求");
        if (!formData.code) return messageError("请输入验证码");
    }

    let res = await apiLogin(formData);
    useUserStore().login(res.token);
    messageSuccess("登录成功！", () => {
        useRoute().jumpTo({ url: "/pages/index/index", type: "reLaunch" });
    });
};

const userRegister = () => {
    useRoute().jumpTo({ url: "/pages/login/register" });
};

const wxLogin = () => {
    const login = useLogin();
    if (isWeixin()) {
        login.getCode(getUrl('app/'));
    } else {
        uni.showToast({ title: "非微信环境，不可登录！", icon: "none" });
    }
};
</script>

<style lang="scss" scoped>
.login-container {
    height: 100vh;
    background: #fff;

    .head-img {
        width: 100%;
        height: 450rpx;
        background-size: 100%;

        .txt {
            text-align: left;
            font-size: 42rpx;
            color: #ffffff;
            padding: 130rpx 0 0 70rpx;
            font-weight: bold;
            line-height: 70rpx;
        }
    }

    .login-view {
        width: 100%;
        position: relative;
        margin-top: -120rpx;
        background-color: #ffffff;
        border-radius: 8% 8% 0% 0;

        .login-box {
            width: 600rpx;
            margin: 0 auto;
            font-size: 28rpx;
            padding-top: 80rpx;

            .code-txt {
                color: $u-primary;
                font-size: 15px;
            }

            .navigator-txt {
                color: $u-primary;
            }

            button {
                font-size: 28rpx;
                background: #2796f2;
                color: #fff;
                height: 90rpx;
                line-height: 90rpx;
                border-radius: 50rpx;
                font-weight: bold;
            }

            .bottom {
                text-align: center;
                width: 250rpx;
                margin: 50rpx auto 0;
                padding-bottom: 100rpx;

                image {
                    width: 50rpx;
                    height: 50rpx;
                }
            }

            .icon {
                float: left;
                width: 100%;
            }

            .line {
                text-align: center;
                margin: 80rpx 0 40rpx 0;
                color: #666;

                text {
                    margin-left: 20rpx;
                    color: #aaaaaa;
                    font-size: 27rpx;
                }
            }

            .txt {
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
            }

            .reg {
                font-size: 28rpx;
                color: #fff;
                height: 90rpx;
                line-height: 90rpx;
                border-radius: 50rpx;
                font-weight: bold;
                background: #f5f6fa;
                color: #000000;
                text-align: center;
                margin-top: 30rpx;
            }
        }
    }
}
</style>
